import { ComponentClass } from 'react'
import { connect } from '@tarojs/redux'

import Taro, { Component, Config } from '@tarojs/taro'

import { AtList, AtListItem, AtToast } from 'taro-ui'

import { View } from '@tarojs/components'

import YContentPadded from '../../components/YContentPadded'
import YTableDivider from '../../components/YTableDivider'

import { queryUsers } from '../../actions/goods'

import './Winnings.scss'

type PageStateProps = {
  goods: object | {},
}

type PageDispatchProps = {
  fetchUsers: (object) => void
}

type PageOwnGoodsUsersProps = {
  id: number,
  avatarUrl: string
}

type PageOwnProps = {
  goods: {
    profile: {
      data: {
        id: number
      }
    },
    users: {
      pagination: { count: number },
      data: PageOwnGoodsUsersProps[]
    }
  },
  fetchUsers: (params: object, callback: (data: { errno: number }) => void) => {}
}

type PageState = {}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface GoodsWinnings {
  props: IProps
}

@connect(({ goods }) => ({
  goods
}), (dispatch) => ({
  fetchUsers(params, callback) {
    dispatch(queryUsers(params, callback))
  }
}))
class GoodsWinnings extends Component {
  config: Config = {
    navigationBarTitleText: '中奖名单',
    enablePullDownRefresh: true,
    backgroundColor: '#ccc'
  }

  state = {
    isOpened: false
  }

  componentWillMount() {
    this.props.fetchUsers({isWinning: true}, data => {
      console.log(data, '123')
    })
  }

  onClick = (msg) => {
    console.log(msg, 123)
  }

  onPullDownRefresh() {

    console.log('--------下拉刷新-------')
    Taro.showNavigationBarLoading() //在标题栏中显示加载
    setTimeout(() => {
      // complete
      Taro.hideNavigationBarLoading() //完成停止加载
      Taro.stopPullDownRefresh() //停止下拉刷新
    }, 2000)

  }

  onReachBottom() {

    this.setState(state => ({
      ...state,
      isOpened: true
    }))

    console.log('--------上拉刷新-------')
    setTimeout(() => {
      Taro.stopPullDownRefresh() //停止下拉刷新

      this.setState(state => ({
        ...state,
        isOpened: false
      }))

    }, 2000)

  }

  render() {
    return (
      <View className='GoodsUserProfile'>
        <AtToast
          isOpened={this.state.isOpened}
          text='加载中...'
          status='loading'
          hasMask={true}
        />
        <YTableDivider title='奖品一：阳澄湖大闸蟹' />
        <YContentPadded>
          <AtList>
            {
              Array.from(new Array(3)).map((i, k) => (
                <AtListItem
                  key={k}
                  thumb='https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'
                  extraThumb='https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'
                  extraText='+56'
                  note='2018/08/02'
                  title='张晓东'
                />   
              ))
            }
          </AtList>
        </YContentPadded> 
        <YTableDivider title='奖品二：潜江小龙虾套餐' />
        <YContentPadded>
          <AtList>
            {
              Array.from(new Array(6)).map((i, k) => (
                <AtListItem
                  key={k}
                  thumb='https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'
                  extraThumb='https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'
                  extraText='+56'
                  note='2018/08/02'
                  title='张明明'
                />   
              ))
            }
          </AtList>
        </YContentPadded>       
      </View>
    )
  }
}

export default GoodsWinnings as ComponentClass<PageOwnProps, PageState>